export let name = "product-service-page";
export function Render(){
    return`
    <style>
    .serviceGuarantee{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    }
    .serviceContent{
    width: 100%;
    height: 43%;
    background-color: white;
    border-radius: 3rem 3rem 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 1rem 1.5rem;
    overflow: auto;
    }
    .serviceGuarantee .backGround{
    height: 53%;
    }
    .serviceContent h1{
    font-size: 3rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
    position: fixed;
    top: 57%;
    left: 2rem;
    }
    .serviceContent ul{
    width: 100%;
    margin-top: 8rem;
    margin-bottom: 6rem;
    }
    .serviceContent ul li{
    margin: 4rem 0 2rem 2rem;
    }
    .serviceContent ul li img{
    width: 3rem;
    margin-right: 2rem;
    }
    .serviceContent ul li .serviceGuarantee-item{
    width: 80%;
    }
    .serviceContent ul li .serviceGuarantee-item p:nth-child(1){
    font-size: 2.4rem;
    margin-bottom: 2rem;
    }
    .serviceContent ul li .serviceGuarantee-item p:nth-child(2){
    font-size: 2.2rem;
    color: #999999;
    line-height: 3rem;
    }
    .serviceGuarantee-btn{
    width: 98%;
    height: 6rem;
    background:linear-gradient(90deg, #2aae67 , rgba(42, 174, 103, .8)) ;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    border-radius: 2rem;
    font-size: 2.6rem;
    margin-left: 1%;
    }
</style>
<!--服务保障页面-->
<div class="serviceGuarantee" style="display: none">
    <div class="backGround"></div>
    <div class="serviceContent">
        <h1>服务保障</h1>
        <ul>
            <li class="clearfix"><img class="left" src="../../../imgs/正品保障.png"><div class="left serviceGuarantee-item"><p>正品保障</p><p>正品保障，假一赔十</p></div></li>
            <li class="clearfix"><img class="left" src="../../../imgs/7天无理由.png"><div class="left serviceGuarantee-item"><p>7天无理由退换</p><p>满足相应条件（吊牌缺失,洗涤后不支持）时，消费者可 申请“7天无理由退换货”</p></div></li>
            <li class="clearfix"><img class="left" src="../../../imgs/运费险.png"><div class="left serviceGuarantee-item"><p>退货运费险</p><p>卖家投保退货运费险，负担一定金额退货运费</p></div></li>
            <li class="clearfix"><img class="left" src="../../../imgs/退款.png"><div class="left serviceGuarantee-item"><p>极速退款</p><p>卖家投保退货运费险，负担一定金额退货运费</p></div></li>
        </ul>
    </div>
    <div class="btns"><input type="button" value="确定" class="serviceGuarantee-btn"></div>
</div>
    `
}
export function afterRender(){
    //点击保障弹出服务保障页面,以及点确定关闭
    let guaranteeBtn = document.querySelector(".goods-guarantee-one");
    let serviceGuarantee = document.querySelector(".serviceGuarantee");
    let serviceGuaranteeBtn = document.querySelector(".serviceGuarantee-btn");
    guaranteeBtn.addEventListener("click", function () {
        serviceGuarantee.style.display = "block";
    })
    serviceGuaranteeBtn.addEventListener("click", function () {
        let fatherDiv = serviceGuaranteeBtn.parentElement.parentElement;
        fatherDiv.style.display = "none";
    })
}